<template>
  <div class="app">
    <h1 class="title">App组件</h1>
    <hr />
    <h2>求和为：{{ sum1 }}</h2>
    <h2>求和为：{{ sum2 }}</h2>
    <h2>汽车Car1信息：{{ car1 }}</h2>
    <h2>汽车Car2信息：{{ car2 }}</h2>
    <button @click="changeSum1">sum1+1</button>
    <!-- <button @click="changeSum2">sum2+1</button>-->

    <button @click="updateCar1Name">修改汽车Car1名称</button>
    <button @click="updateCar1Color">修改汽车Car1颜色</button>
    <button @click="updateCar1Engine">修改汽车Car1引擎</button>

    <!-- <button @click="updateCar2Name">修改汽车Car2名称</button>-->
    <button @click="updateCar2Color">修改汽车Car2颜色</button>
    <button @click="updateCar2Engine">修改汽车Car2引擎</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { reactive, readonly, ref, shallowReadonly } from 'vue'

// 数据
let sum1 = ref(0)
let sum2 = readonly(sum1)
let car1 = reactive({
  brand: '奔驰',
  options: {
    color: 'red',
    engine: 'V8',
  },
})
// 其中shallowReadonly是限制浅层次的只读，如果是深层次的就不进行限制，可以进行修改、读取
let car2 = shallowReadonly(car1)

// 方法
function changeSum1() {
  sum1.value += 1
}
// 其中使用readonly修饰之后，该数据就不能修改了
// function changeSum2() {
//   sum2.value += 1
// }

function updateCar1Name() {
  car1.brand = '奥迪'
}
function updateCar1Color() {
  car1.options.color = '黄色'
}
function updateCar1Engine() {
  car1.options.engine = 'V24'
}

// 其中使用readonly修饰之后，该数据就不能修改了
// function updateCar2Name() {
//   car2.brand = '奥迪'
// }

// 其中使用readonly修饰之后，该数据就不能修改了
function updateCar2Color() {
  car2.options.color = '黄色'
}
function updateCar2Engine() {
  car2.options.engine = 'V24'
}
</script>

<style>
.app {
  background: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
}
</style>
